<template>
  <div class="refine_userlist">
      <h2 class="titleblue">船舶报警</h2>
      <div class="contant">

      <data-table :page='currentPage' :head="thead" :data="tableData" :actions="null"
                  @callback="dataAction"></data-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        layout="total,prev, pager, next, jumper"
        :total="dataCount"
        background
      >
      </el-pagination>
    </div>

  </div>

</template>

<script>
  import DataTable from '@/components/common/DataTable.vue'

  export default {
      name: 'UserList',
    components: {
      'data-table': DataTable
    },
    data: function () {
      return {
        thead: [
          {name: '中文船名', prop: 'shipNameCn'},
          {name: '英文船名', prop: 'shipNameEn'},
          {name: 'mmsi', prop: 'mmsi'},
          {name: 'imo', prop: 'imo'},
          {name: '报警类型', prop: 'type'},
          {name: '报警时间', prop: 'createTime'}
        ],
        tableData: [],
        options: [{name: '编辑', prop: 'edit'}, {name: '禁用', prop: 'disabled'}, {name: '启用', prop: 'able'}, {
          name: '删除',
          prop: 'del'
        }, {name: '重置密码', prop: 'reset'}],
        currentPage: 1,
        currentPages: 1,
        dataCount: 5
      }
    },
    created () {
      this.tableData = [
        {shipNameCn: '鼎新126', shipNameEn: 'DING XIN 126', mmsi: '426128374', imo: '2993847', type: '无进出港计划', createTime: '2020-03-01 10:15:28'},
        {shipNameCn: '东方红', shipNameEn: 'DONG FANG HONG', mmsi: '293720583', imo: '3928109', type: '无进出港计划', createTime: '2020-03-10 12:30:29'},
        {shipNameCn: '东方之珠', shipNameEn: 'DONG FANG ZHI ZHU', mmsi: '408928475', imo: '5738291', type: '长期停航', createTime: '2020-01-20 13:05:14'},
        {shipNameCn: '长海运04', shipNameEn: 'CHANG HAI YUN 04', mmsi: '516294852', imo: '3048372', type: 'AIS状态变化', createTime: '2020-01-08 19:09:01'},
        {shipNameCn: '昌盛50', shipNameEn: 'CHANG SHENG 50', mmsi: '491029573', imo: '9472812', type: '施工船舶', createTime: '2019-12-30 16:00:47'}
      ]
    },
    methods: {
      search () {
        this.currentPage = 1
      },

      dataAction (param) {

      },
      handleClick (tab, event) {
        this.currentPage = this.currentPage1
      },
      handleCurrentChange (val) {
        this.currentPage = val
      }
    }
  }
</script>

<style lang='scss'>
  .refine_userlist {
    width: 100%;
    display: inline-block;

    .inlanselect {
      float: left;
      margin-right: 10px;
    }

    .el-tabs {
      width: 100%;
      margin-top: 20px;
      display: inline-block;
    }

    .el-table tr:nth-child(2n) {
      background: #FAFAFA
    }

    .table {
      margin-top: 20px;
    }

    .user-title {
      width: 100%;
      display: inline-block;
    }
  }
</style>
